<template>
  <div class="item_box">
    <div class="item_box_flex">
        <div class="info_left_box">
            <div>
                <el-avatar :src="infoData.portrait"></el-avatar>
            </div>
        </div>
        <div class="info_right_box">
            <div v-if='currentUser.user.uid !== infoData.userId' class="start_dialog" @click="startDialog">
                <span>对话</span>
            </div>
            <div class="nickName_box">
                <a @click="seeHim()"><span class="span_nickName">{{infoData.nickName}}</span></a>
            </div>
            <div class="createTime_box">
                <span class="span_createTime">{{infoData.createTime}}</span>
            </div>
            <div class="info_attr_box"> 
                <div class="span_title"><span >{{infoData.infoTitle}}</span></div>
                <div v-for="(attrValue, index) in info_attr_value" :key="index"
                    class="info_attr_value_box"
                >
                    <div class="info_attr_value_left_box">{{attrValue.attrName}}</div>
                    <div class="info_attr_value_right_box">{{attrValue.attrValue}}</div>
                </div>
                <div v-if="infoData.infoAttrValueVos.length>2" class="fold_box">
                    <i :class="foldClass" ></i>
                    <a @click="changeFoldStatus()">{{foldStatus? '展开' : '折叠'}}</a>
                </div>
            </div>
            <div class="info_image_box" v-if="infoData.img.length > 0">
                <div v-for="(src, index)  in infoData.img" :key = 'index'>
                    <el-image :src="src" fit='cover'
                        style="width:100px; height:100px;"
                        @click="showBigImg(src)"></el-image>
                </div>
            </div>
            <div class="btn_box">
                <div class="btn" ref="comment"
                    @click="handleComment" 
                    @mouseenter="onHover('comment')" 
                    @mouseleave="onLeave('comment')" >
                    <span class="btn_content">
                        <span>评论</span>
                        <span>{{infoData.commentNum}}</span>
                    </span>
                </div>
                <div class="btn" ref='btn2' 
                    @mouseenter="onHover('btn2')" 
                    @mouseleave="onLeave('btn2')">
                    <span class="btn_content">
                        <i class="el-icon-more"></i>
                        <!-- <span>3</span> -->
                    </span>
                </div>
            </div>
        </div>
    </div>

    <div class="comment_box" v-if="commentShowStatus">
        <comment :infoData="infoData"></comment>
    </div>
  </div>
</template>

<script>
import comment from '../comment/comment'
export default {
  components: {
    comment
  },
  mounted() {
    
  },
  props:{
      infoData: Object,
  },
  computed:{
      info_img: function(){// 默认getter，计算所有的图片信息，保存在这个数组中，用于显示
        let _attrValueVos = this.infoData.infoAttrValueVos;
        for(var i = 0;i< _attrValueVos.length;i++){
            if(_attrValueVos[i].type == 'upload'){
                return _attrValueVos[i].attrValue.split(';') 
            }
        }
        return [];
      },
      info_attr_value: function(){
          let limit = 2;
          let _attrValueVos = this.infoData.infoAttrValueVos;
          if( this.foldStatus && _attrValueVos.length > limit){
              let newArray = [];
              for(var i = 0;i<limit;i++){
                  newArray.push(_attrValueVos[i]);
              }
              return newArray;
          }else{
              return _attrValueVos;
          }
      }
  },
  data() {
    return {
      foldStatus: true, // 折叠 状态标记
      foldClass: 'el-icon-arrow-down',
      commentShowStatus: false, 
    }
  },
  methods: {
    seeHim(){
        console.log("查看他["+this.infoData.userId+"]的信息")
    },
    // 查看大图
    showBigImg(url){
        this.$emit("showBigImg",url)
    },
    // 修改 折叠标记
    changeFoldStatus(){
        this.foldStatus = !this.foldStatus
        if(this.foldStatus){
            this.foldClass='el-icon-arrow-down';
        }else{
            this.foldClass='el-icon-arrow-up';
        }
    },
    // 查看和进行 评论
    handleComment(){
        let _showStatus = this.commentShowStatus;
        if(_showStatus){
            this.commentShowStatus = false;
        }else{
            this.commentShowStatus = true;
        }

    },
    onHover(ref){
        // console.log("onHover", ref)
        this.highLight(ref);
    },
    onLeave(ref){
        if(ref === 'comment' && this.commentShowStatus){
            return;
        }
        this.cancelHighLight(ref);
    },
    highLight(ref){
        this.$refs[ref].style.color='#ffffff'
    },
    cancelHighLight(ref){
        this.$refs[ref].style.color='#000000'
    },
    // 发起对话
    startDialog(){
        // 发起对话
        var toId = this.infoData.userId
        // return;
        this.$http1({
          url: this.$http.adornUrl(`/user/dialog/relation/save/${toId}`),
          method: "post",
        }).then(({ data }) => {
          this.$message({
            type: "success",
            message: "成功!",
          });
            this.$router.replace({name: 'message'})
        });
    },
  },
}
</script>

<style>

/* === 文字设置 === */
.span_nickName{
    font-size: 18px;
}
.span_createTime{
    color: #666;
    font-size: 12px;
}
.span_title{
    font-size: 20px;
    margin-bottom: 10px;
}
/** === 整个 信息 === */
.item_box{  
    width: 100%;
    /* height: 200px; */
    margin-top: 10px;
    border-radius: 5px;
    background: #aaa;
}
.item_box_flex{
    display:flex;
}

.info_left_box{ /** 信息 左侧 */
    padding: 20px 20px 0 20px;
}
.info_right_box{ /** 信息 右侧 */
    width: 534px;
    /* margin-left: 10px; */
    padding-top: 20px;
    /* background: rgb(255, 164, 164); */
}

/* === 昵称 === */
.nickName_box{}
/* === 时间 === */
.createTime_box{
    padding-top: 5px;
}
.info_attr_box{
    margin-top: 10px;

}
/* === 信息 属性 === */
.info_attr_value_box{ 
    display: flex;
    margin-top: 5px;
}
.info_attr_value_left_box{
    width: 100px;
}
.info_attr_value_right_box{
    width: 300px;
}
/* === 折叠 === */
.fold_box{
    margin-top: 5px;

}
.fold_box a{
    cursor: pointer;
}
/* === 图片 === */
.info_image_box{ 
    display: flex;
    margin-top: 10px;
}
.el-image{
    margin-left: 10px;
}
/* === 按钮组 === */
.btn_box{
    height: 48px;
    display: flex;
    cursor: pointer;
}
.btn{
    height: 100%;
    width: 92px;
    line-height: 46px; /** span垂直居中 */
    vertical-align: middle;
}
.btn_content{
    /* color: rgb(154, 253, 5); */
}

.item_box a{
    cursor: pointer;
    color: #111;
}

.start_dialog{
    /* display: block; */
    float: right;
    margin-right: 20px;
    cursor: pointer;
}
</style>